<template>
  <div class="singer-container">
    <div class="cate01-warp">
      <div
        class="cate01-item"
        :class="{ 'cate01-active': item.active }"
        v-for="(item, index) of cate01"
        :key="index"
        @click="onCate01(item)"
      >
        {{ item.label }}
      </div>
    </div>

    <div class="cate01-warp">
      <div
        class="cate01-item"
        :class="{ 'cate01-active': item.active }"
        v-for="(item, index) of cate02"
        :key="index"
        @click="onCate02(item)"
      >
        {{ item.label }}
      </div>
    </div>

    <div class="singer-list-warp">
      <div
        class="singer-item"
        v-for="item of list"
        :key="item.picId_str"
        @click="$router.push({ path: '/singerDetail', query: { id: item.id } })"
      >
        <div class="singer-item-left">
          <van-image round width="60px" height="60px" :src="item.picUrl" />
          <span style="margin-left: 10px">{{ item.name }}</span>
        </div>
        <div class="singer-item-right">+ 关注</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingerList',
  data() {
    return {
      cate01: [
        {
          label: '全部',
          value: -1,
          active: true,
        },
        {
          label: '华语',
          value: 7,
          active: false,
        },
        {
          label: '欧美',
          value: 96,
          active: false,
        },
        {
          label: '日本',
          value: 8,
          active: false,
        },
        {
          label: '韩国',
          value: 16,
          active: false,
        },
        {
          label: '其他',
          value: 0,
          active: false,
        },
      ],
      cate02: [
        {
          label: '全部',
          value: -1,
          active: true,
        },
        {
          label: '男',
          value: 1,
          active: false,
        },
        {
          label: '女',
          value: 2,
          active: false,
        },
        {
          label: '乐队',
          value: 3,
          active: false,
        },
      ],
      curPage: 1,
      params: {
        limit: 30,
        offset: 0,
        type: -1,
        area: -1,
        initial: '',
      },
      list: [],
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    onCate01(item) {
      const pre = this.cate01.find((i) => i.value === this.params.area);
      pre.active = false;
      this.params.area = item.value;
      item.active = true;
      this.getCateList();
    },
    onCate02(item) {
      const pre = this.cate02.find((i) => i.value === this.params.type);
      pre.active = false;
      this.params.type = item.value;
      item.active = true;
      this.getCateList();
    },
    getCateList() {
      this.$request('get', '/artist/list', this.params).then((res) => {
        console.log(res);
        this.list = res.artists;
      });
    },
  },
};
</script>

<style scoped>
.singer-container {
  padding: 20px;
  font-size: #666;
}

.cate01-warp {
  font-size: 12px;
  display: flex;
  height: 50px;
  align-items: center;
}
.cate01-item {
  box-sizing: border-box;
  width: 80px;
  text-align: center;
}
.cate01-item + .cate01-item {
  margin-left: 10px;
}

.cate01-active {
  color: #fff;
  background-color: #d43c33;
  border-radius: 20px;
  padding: 5px 10px;
}

.singer-list-warp {
  display: flex;
  flex-direction: column;
}

.singer-item {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5;
}

.singer-item-left {
  display: flex;
  align-items: center;
}

.avatar {
  width: 70px;
  height: 70px;
  object-fit: fill;
  border-radius: 70px;
}

.singer-item-right {
  color: #d43c33;
  border: 1px solid #d43c33;
  border-radius: 30px;
  padding: 5px 10px;
}

.singer-item:active {
  background-color: rgb(233, 233, 233);
}
</style>
